<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var qxBtn = document.getElementById("qx");
            var qbxBtn = document.getElementById("qbx");
            var fxBtn = document.getElementById("fx");
            var selectAll = document.getElementById("selectAll");
            //全选
            qxBtn.onclick =function (ev) {
                var cks = document.getElementsByName("ck");
                for (var i = 0; i <cks.length ; i++) {
                    cks[i].checked = true;
                }
            }
            //全不选
           qbxBtn.onclick = function (ev) {
                var cks = document.getElementsByName("ck");
               for (var i = 0; i <cks.length ; i++) {
                   cks[i].checked = false;
               }
           }
            //反选
           fxBtn.onclick = function (ev) {
                var cks = document.getElementsByName("ck");
               for (var i = 0; i <cks.length; i++) {
                   if(cks[i].checked){
                       cks[i].checked = false;
                   }else {
                       cks[i].checked = true;
                   }
               }
           };
            //通过复选框统一控制所有的复选框
            selectAll.onclick = function () {
                var cks = document.getElementsByName("ck");
                for (var i = 0; i < cks.length; i++) {
                    cks[i].checked = selectAll.checked;
                }
            };

            qxBtn.onmouseover = function () {
                /*qxBtn.style.height = "100px";
                qxBtn.style.width = "100px";
                qxBtn.style.fontSize = "32px";*/
                qxBtn.className = "testClass";
            };
            qxBtn.onmouseout = function () {
                qxBtn.className = "";
            };
        };

    </script>
    <style type="text/css">
        .testClass{height: 100px; width: 100px; font-size: 32px;}
    </style>
</head>
<body>
<input type="button" value="充值" id="qx">
<input type="button" value="全不选" id="qbx">
<input type="button" value="反选" id="fx">
<input type="checkbox" id="selectAll"><br>
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
<input type="checkbox" name="ck">
</body>
</html>